<template>
    <baidu-map class="bm-view" :ak="APP_KEY" :center="center" :zoom="zoom" :scroll-wheel-zoom="scrollWheelZoom" @ready="handlerReady" @click="handlerClickMap">
        <template v-if="markerPoint">
            <bm-marker :position="markerPoint" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label :content="pointLabel" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -12, height: 30}"/>
            </bm-marker>
        </template>
    </baidu-map>
</template>

<script>
import {BaiduMap,BmMarker,BmLabel,BmLocalSearch} from 'vue-baidu-map/components'
export default {
    name:"BMap",
    props:{
        addressInfo:{
            type:String,
            default:""
        }
    },
    components: {
        BaiduMap,BmMarker,BmLabel,BmLocalSearch
    },
    data () {
        return {
            center: {lng: 0, lat: 0},
            zoom: 10,
            scrollWheelZoom:false,
            APP_KEY:"V32Qkeh2j9ssg5Dxo5GIGNxmTmS6IesN",
            markerPoint:null,
            pointLabel:""
        }
    },
    computed:{
        
    },  
    methods: {
        handlerReady ({BMap, map}) {
            if(this.addressInfo){
                let geocoder = new BMap.Geocoder();
                geocoder.getPoint(this.addressInfo,point => {
                    this.center = point
                    this.markerPoint = point
                    this.pointLabel = this.addressInfo;
                })
            }else{
                this.center.lng = 114.337915
                this.center.lat = 30.542405
            }
            this.zoom = 10
            this.scrollWheelZoom = true
        },
        handlerClickMap({type, target, point, pixel, overlay}){
            this.markerPoint = point;
            let geocoder = new BMap.Geocoder();
            geocoder.getLocation(point,res => {
                this.pointLabel = res.address;
                this.$emit('handle-marker',res)
            })
        }
    }
}
</script>

<style>
.bm-view {
    width: 100%;
    height: 500px;
}
.BMap_cpyCtrl {
    display: none!important;
}
.anchorBL {
    display: none!important;
}
</style>